<script setup lang='ts'>
import { ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
defineOptions({
  name: 'Hospitaltabledrawer'
})
const props = defineProps<{
  sondata: { state: string, data: object}
}>()
console.log(props,"Hospitaltabledrawer接受参数");
const input = ref()
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
]
const emit = defineEmits(['getdrawerValue'])
const closeSon = () => {
  emit('getdrawerValue', false)
}
const close = () => {
  closeSon()
}
const onSubmit = () => {
  closeSon()
}
</script>

<template>
  <div class="table_add">
    <div class="icon">
      <el-icon @click="close"><Close /></el-icon>
    </div>
    <div class="form_list">
      <div class="li">
        <span class="li_text">名称：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
      <div class="li">
        <span class="li_text">简称：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
    </div>
    <div class="form_list">
      <div class="li">
        <span class="li_text">医院编码：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
      <div class="li">
        <span class="li_text">节点编号：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
    </div>
    <div class="form_list">
      <div class="li_all">
        <span class="li_text">上级单位：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
    </div>
    <div class="form_list">
      <div class="li">
        <span class="li_text">节点类别：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
      <div class="li">
        <span class="li_text">机构分类：</span>
        <div class="li_input">
          <el-select v-model="value" clearable placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="form_list">
      <div class="li">
        <span class="li_text">医院级别：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
      <div class="li">
        <span class="li_text">等级级别：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
    </div>
    <div class="form_list">
      <div class="li_all">
        <span class="li_text">简介：</span>
        <div class="li_input">
          <el-input v-model="input" placeholder="输入内容" />
        </div>
      </div>
    </div>
    <div class="bottom_btn">
      <el-button type="primary" plain @click="onSubmit"> 保存 </el-button>
      <el-button type="primary" plain @click="onSubmit"> 关闭 </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
}
@mixin li($width: auto) {
  width: $width;
  .li_text {
    width: 80px;
    text-align: right; /* 将按钮文本内容向右对齐 */
  }
  .li_input {
    flex: 1;
    .el-input {
      width: 100%;
    }
    .el-radio {
      margin: 0 5px 0 0;
    }
  }
}
.table_add {
  min-width: 400px;
  .icon {
    margin-left: -6px;
  }
  .form_list {
    @include flex;
    justify-content: space-between;
    margin-bottom: 8px;
    .li {
      @include flex;
      @include li(49%);
    }
    .li_all {
      @include flex;
      @include li(100%);
    }
  }
  .bottom_btn {
    margin-top: 50px;
    text-align: center;
  }
}
</style>